<template>
    <div class="home">
        <h-card :data="data">
            <template slot-scope="scope">
                <div class="header">
                    <img :src="scope.row.img" class="img" />
                    <div class="info">
                        <div class="title">{{ scope.row.title }}</div>
                        <div class="count">{{ scope.row.count }}</div>
                    </div>
                </div>
            </template>
        </h-card>
        <div ref="chartsRef" class="container"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import HCard from "./HCard";
export default {
    components: {
        HCard,
    },
    data() {
        return {
            data: [],
            homeData: {
                amountData: [220, 282, 191, 234, 290, 330, 310],
                orderData:
                    [120, 132, 101, 134, 90, 230, 210],
                todayOrder:
                    189,
                totalAmount:
                    202466,
                totalOrder:
                    5486,
                totayAmount:
                    2189,
                xData
                    :
                    ["2019/11/17", "2019/11/18", "2019/11/19", "2019/11/20", "2019/11/21", "2019/11/22", "2019/11/23"]
            }
        };
    },
    methods: {
        getTotalData() {
            let {
                amountData,
                orderData,
                todayOrder,
                totalAmount,
                totalOrder,
                totayAmount,
                xData,
            } = this.homeData;
            this.data = [
                {
                    title: "总订单",
                    count: totalOrder,
                    img: require("../../assets/imgs/1.webp"),
                },
                {
                    title: "总销售额",
                    count: totalAmount,
                    img: require("../../assets/imgs/2.webp"),
                },
                {
                    title: "今日订单数",
                    count: todayOrder,
                    img: require("../../assets/imgs/3.webp"),
                },
                {
                    title: "今日销售额",
                    count: totayAmount,
                    img: require("../../assets/imgs/4.webp"),
                },
            ];
            this.getEcharts(xData, amountData, orderData);
        },

        getEcharts(xData, amountData, orderData) {
            // 初始化实例
            this.myChart = echarts.init(this.$refs.chartsRef);
            // 配置项
            let options = {
                title: {
                    text: "数据统计",
                    top: 15,
                    left: 10,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["订单", "金额"],
                    top: 15,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                        restore: {},
                        dataView: {},
                        dataZoom: {},
                        magicType: {
                            type: ["line", "bar", "stack"],
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: xData,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        showSymbol: true,
                        // symbol: "circle", //设定为实⼼点
                        symbolSize: 10, //设定实⼼点的⼤⼩
                        color: "red", //设定实线点的颜⾊
                        name: "订单",
                        type: "line",
                        stack: "Total",
                        data: orderData,
                    },
                    {
                        symbolSize: 10,
                        color: "green",
                        name: "金额",
                        type: "line",
                        stack: "Total",
                        data: amountData,
                    },
                ],
            };
            // 绘制图表
            this.myChart.setOption(options);
            window.addEventListener("resize", this.myChart.resize);
        },
    },
    mounted() {
        this.getTotalData();
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.myChart.resize);
    },
};
</script>
  
<style lang="less" scoped>
.container {
    height: 400px;
    background-color: #fff;
}
</style>